<template>
  <div class="cpu-info">
      <h1>CPU信息</h1>
      <main>
            <p><span>逻辑处理器 <strong>/</strong> 物理处理器</span>({{logicalMsg}}/{{physicalMsg}})</p>
            <div class="mdui-progress">
                <div
                    class="mdui-progress-determinate"
                    v-bind:style="{width: getWidth + '%'}"
                ></div>
            </div>
            <div class="rate">
                <h3>核心速率</h3>
                <ul v-for="(item, index) in core_rate" :key="index">
                    <li>
                      <span>核心 (Core) {{index}}:</span>
                      <div class="mdui-progress">
                      <div
                              class="mdui-progress-determinate"
                              v-bind:style="{width: item * 10 + '%'}"
                          ></div>
                      </div>
                    </li>
                </ul>
            </div>
      </main>
  </div>
</template>

<script>
export default {
  props: {
    logicalMsg: Number,
    physicalMsg: Number,
    core_rate: Array
  },
  computed: {
    getWidth () {
      const msg = this.logicalMsg / this.physicalMsg
      return msg * 100
    }
  }
}
</script>

<style lang="less" scoped>
.cpu-info {
  border: 1px solid #efefef;
  display: flex;
  flex-direction: column;
  align-items: center;
  h1{
      font-size: 25px;
      margin: 35px 0;
  }
  main{
      display: flex;
      flex-direction: column;
      width: 80%;
      ul {
          padding: 0;
          list-style: none;
          li {
              width: 100%;
              line-height: 2rem;
          }
      }
  }
}
</style>
